<template>
  <div>
        <van-nav-bar fixed>
          <template #left>
            <img src="@/assets/logo.png" alt="" class="logo" />
          </template>
          <template #right>
            <van-icon name="search" size=".48rem" color="#fff"  @click="$router.push('/search')"/>
          </template>
        </van-nav-bar>
        <!-- 频道 -->
         <div class="tabs_content">
          <van-tabs v-model="active" color="#007bff" offset-top="1.2267rem" animated sticky>
            <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name">
              <article-list :cid="obj.id"  ></article-list>
            </van-tab>
          </van-tabs>
          <!-- 频道+ -->
          <van-icon name="plus" size=".3733rem" class="moreChannels" @click="show=true" />
        </div>
        <!-- 频道编辑显示弹层 -->
          <van-popup v-model="show" class="edit_wrap">
            <channel-edit v-model="show" :userChannelList.sync="userChannelList" @changeChannelEV="changeChannelFn"></channel-edit>
            </van-popup>
  </div>
</template>
<script>
import ChannelEdit from '@/views/Home/components/ChannelEdit.vue'
import { getUserChannelListAPI } from '@/api'
import ArticleList from '@/views/Home/ArticleList.vue'
export default {
  name: 'HM-Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 切换栏高亮
      userChannelList: [],
      show: false // 频道弹框显示与否
    }
  },
  created () {
    this.getUserChannelListFn()
  },
  methods: {
    // 获取用户已选频道列表
    async getUserChannelListFn () {
      const res = await getUserChannelListAPI()
      // console.log(res)
      const {
        data: {
          data: { channels }
        }
      } = res
      this.userChannelList = channels
    },
    // 切换频道 通过active==>下标 设置切换频道 channelObj子组件传递过来的参数
    changeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.active = index
    }

  }
}
</script>
<style scoped lang="less">
 .logo {
      width: 100px;
      height: 30px;
 }
.tabs_content {
      padding-top: 46px;
 }
    // 设置 tabs 容器的样式
  /deep/ .van-tabs__wrap {
      padding-right: 30px;
      background-color: #fff;
 }

    // 设置小图标的样式
.moreChannels {
      position: fixed;
      top: 62px;
      right: 8px;
      z-index: 999;
 }
.edit_wrap{
      width: 100%;
      height: 100%;
}
</style>
